/*
  商品收费类型19
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button type="primary" @click="handleAddUpdate()" v-repeatClick>添加</el-button>
      <el-button @click="handleBeforeUpdate" v-repeatClick>修改</el-button>
      <el-button @click="enabled(false)">禁用</el-button>
      <el-button @click="enabled(true)">启用</el-button>
      <el-button @click="view" v-repeatClick>查看</el-button>
      <el-button @click="getPostage" v-repeatClick>刷新</el-button>
      <el-button type="danger" @click="delPostage" v-repeatClick>删除</el-button>
    </my-header>

    <!-- 列表区 -->
    <el-card  style="flex: 1;">
      <div class="app-page">
        <div class="content-flex">
          <div>
            <el-form ref="search" :model="search" inline size="small">
              <el-form-item label="" prop="info">
                <el-input
                  placeholder="搜索:资费方式名称/客户号(多客户号使用逗号间隔)"
                  v-model="search.info"
                  style="width: 400px"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="" prop="exemptFirstWeight">
                <el-select
                  clearable
                  v-model="search.exemptFirstWeight"
                  style="width: 100px"
                  placeholder="免首重">
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="idCardNeeded">
                <el-select
                  clearable
                  v-model="search.idCardNeeded"
                  style="width: 100px"
                  placeholder="身份证">
                  <el-option label="需要" :value="true"></el-option>
                  <el-option label="不要" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="exemptServiceFee">
                <el-select
                  clearable
                  v-model="search.exemptServiceFee"
                  style="width: 100px"
                  placeholder="免服务费">
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="enabled">
                <el-select
                  clearable
                  v-model="search.enabled"
                  style="width: 100px"
                  placeholder="启用">
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="">
                <el-button type="primary" round @click="getPostage">搜索</el-button>
                <el-button
                  type="warning"
                  round
                  @click="$refs.search.resetFields()"
                >重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 列表区 -->
        <div style="flex: 1">
          <el-table
            height="100%"
            :data="data"
            border
            stripe
            highlight-current-row
            ref="multipleTable"
            @row-dblclick="handleRowDbclick"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="index" width="55" align="center"></el-table-column>
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column label="名称" prop="name" sortable width="200">
              <template slot-scope="scope">
                <div class="tdItem">
                  <el-link @click="handleRowDbclick(scope.row)">{{ scope.row.name }}</el-link>
                </div>
                <div class="tdItem">
                  首重:{{scope.row.firstWeight}}&nbsp;&nbsp;&nbsp;&nbsp;续重:{{scope.row.nextWeight}}
                </div>
                <div class="tdItem">
                  单位：加元 / 磅
                </div>
              </template>
            </el-table-column>
            <el-table-column label="使用范围" prop="name" sortable>
              <template slot-scope="scope">
                <div class="tdItem">
                  {{scope.row.storeName | storesName(stores)}}
                </div>
                <div class="tdItem">
                  {{scope.row.customerType}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="计费规则" prop="name"  align="center" width="200">
              <template slot-scope="scope">
                <div class="tdItem" v-if="scope.row.weightThresholdValue!=0">
                  总重不足{{scope.row.weightThresholdValue}}按{{scope.row.weightThresholdValue}}计算
                </div>
                <div class="tdItem">
                  小数超过{{scope.row.decimalThresholdValue}}向上取{{scope.row.carryDecimalWithHalf?'0.5':'整'}}
                </div>
                <div class="tdItem">
                  {{scope.row.giveUpDecimal?'未超过部分小数抹零':'未超过部分小数不抹零'}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="附加设置" prop="name"  align="center" width="200">
              <template slot-scope="scope">
                <div class="tdItem" v-if="scope.row.idCardNeeded">
                    <span style="font-size: 20px">
                      <i class="el-icon-circle-check" style="color: #67c23a"></i>
                    </span>
                    需身份证
                </div>
                <div class="tdItem" v-if="scope.row.premiumRate">
                  保险费率：{{scope.row.premiumRate}}%
                </div>
              </template>
            </el-table-column>
            <el-table-column label="启用" prop="enabled" align="center" width="100">
              <template slot-scope="scope">
                <span style="font-size: 20px">
                  <i
                    class="el-icon-circle-check"
                    style="color: #67c23a"
                    v-if="scope.row.enabled"
                  ></i>
                  <i
                    class="el-icon-circle-close"
                    style="color: #f56c6c"
                    v-else
                  ></i>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" sortable prop="createTime" align="center" width="200"></el-table-column>
          </el-table>
        </div>
        <!-- 分页区 -->
        <div style="margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200, 500, 1000]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 添加修改零售预购单信息 -->
    <el-dialog
      v-dialog-drag
      :title="title + '商品收费类型'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      @close="restForm"
    >
      <el-form
        size="small"
        :model="goodsCostInfoForm"
        label-position="left"
        ref="goodsCostInfoForm"
        :rules="goodsCostInfoRules"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="self-textarea">
              <el-form-item prop="name" label="名称">
                <el-input v-model="goodsCostInfoForm.name"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="self-textarea">
              <el-form-item prop="firstWeight" label="首重" >
                <el-input v-model="goodsCostInfoForm.firstWeight" @blur="goodsCostInfoForm.firstWeight = oninput(goodsCostInfoForm.firstWeight)"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="self-textarea">
              <el-form-item prop="nextWeight" label="续重">
                <el-input v-model="goodsCostInfoForm.nextWeight" @blur="goodsCostInfoForm.nextWeight = oninput(goodsCostInfoForm.nextWeight)"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="self-textarea">
              <el-form-item prop="thresholdValue" label="超过多少免首重" >
                <el-input v-model="goodsCostInfoForm.thresholdValue" @blur="goodsCostInfoForm.thresholdValue = oninput(goodsCostInfoForm.thresholdValue)"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="self-textarea">
              <el-form-item prop="weightThresholdValue" label="总重不足多少按此计算">
                <el-input v-model="goodsCostInfoForm.weightThresholdValue" @blur="goodsCostInfoForm.weightThresholdValue = oninput(goodsCostInfoForm.weightThresholdValue)"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="self-textarea">
              <el-form-item prop="premiumRate" label="保险费率(%)">
                <el-input v-model="goodsCostInfoForm.premiumRate"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="self-textarea">
              <el-form-item prop="decimalThresholdValue" label="小数超过多少重量向上取整">
                <el-input v-model="goodsCostInfoForm.decimalThresholdValue" @blur="goodsCostInfoForm.decimalThresholdValue = oninput(goodsCostInfoForm.decimalThresholdValue)"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="self-textarea">
              <el-form-item prop="note" label="备注">
                <el-input v-model="goodsCostInfoForm.note"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="self-textarea">
              <el-form-item prop="billingByRealWeight" label="是否按实际重量计费" label-width="100%">
                <el-radio-group v-model="goodsCostInfoForm.billingByRealWeight">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="self-textarea">
              <el-form-item prop="carryDecimalWithHalf" label="是否按0.5进位" label-width="100%">
                <el-radio-group v-model="goodsCostInfoForm.carryDecimalWithHalf">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="self-textarea">
              <el-form-item prop="giveUpDecimal" label="是否抹去小数" label-width="100%">
                <el-radio-group v-model="goodsCostInfoForm.giveUpDecimal">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="storeName" label="所属门店" label-width="100px">
              <el-select
                ref="select"
                filterable
                style="width: 100%"
                v-model="goodsCostInfoForm.storeName"
                @change="handleStoreChange"
                multiple
                placeholder="请选择所属门店">
                <el-option
                  v-for="item in stores"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="customerType" label="客户类型" label-width="100px">
                <el-select
                  filterable
                  style="width: 100%"
                  v-model="goodsCostInfoForm.customerType"
                  placeholder="请选择客户类型"
                  @change="handleCustomerType"
                >
                  <el-option
                    v-for="item in goodsCostInfoFormOptions.type"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="customerNums" label="所属客户" label-width="100px">
              <el-input type="textarea" placeholder="多个客户号请使用逗号间隔或换行"
                        v-model="goodsCostInfoForm.customerNums" maxlength="30" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col style="display: flex;justify-content: space-between;">
            <div style="margin-top: 8px">注：客户类型、所属客户必选其一</div>
            <el-form-item>
              <el-checkbox v-model="goodsCostInfoForm.exemptFirstWeight">免首重</el-checkbox>
              <el-checkbox v-model="goodsCostInfoForm.exemptServiceFee">免服务费</el-checkbox>
              <el-checkbox v-model="goodsCostInfoForm.idCardNeeded">是否需要上传身份证</el-checkbox>
              <el-checkbox v-model="goodsCostInfoForm.enabled">启动</el-checkbox>
              <el-button style="margin-left: 10px" @click="restForm">重置</el-button>
              <el-button type="primary" @click="submit" v-if="title!='查看'">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
let search = {
  //搜索:资费方式名称/客户号
  info:'',
  //是否免除首重
  exemptFirstWeight:'',
  //是否启用
  enabled: "",
  //是否免除服务费
  exemptServiceFee: "",
  //是否需要身份证
  idCardNeeded:""
};
//商品类型基本信息表单
let goodsCostInfoForm = {
  //名称
  name:'',
  //首重,为0则表示不计算首重,必填
  firstWeight:'0.00',
  //续重,为0则表示不计算续重,必填
  nextWeight:'0.00',
  //总重超过多少免首重,0表示不免除首重,必填
  thresholdValue:'0.00',
  //总重不足多少按照此值计算,如总重不足10KG,则按照10KG计算价格,为0则表示不如此计算,必填
  weightThresholdValue:'0.00',
  //保险费率,整数,为0则表示不需要保险费用,必填
  premiumRate:'0',
  //备注
  note:'',
  //是否按照实际重量计费,必填
  billingByRealWeight:false,
  //小数部分超过多少进位,影响重量结果,如阈值为0.2,实际重量为10.1,则向下取,若为10.3,则向上取,必填
  decimalThresholdValue:'0.00',
  //是否以0.5为单位进行上下取值,如10.3向上取为10.5,必填
  carryDecimalWithHalf:false,
  //是否舍弃小数,向下取整,必填
  giveUpDecimal:false,
  //门店名称,前端上传数组,返回也为数组,必填
  storeName:"",
  //客户类型
  customerType:"",
  //客户编号列表,前端上传数组,返回也为数组,和客户类型至少有一个不为空
  customerNums:"",
  //是否免除首重,必填
  exemptFirstWeight:false,
  //是否免除服务费,必填
  exemptServiceFee:false,
  //是否需要身份证,必填
  idCardNeeded:false,
  //是否启用
  enabled:true,
}
import myHeader from "@/components/pageHEader/pageHeader";
import { mapGetters } from "vuex";
import {
  getPostage,
  addPostage,
  modPostage,
  delPostage,
  getPostageInfo,
  disableOrEnablePostage
} from "@/api/baseconfig/postage";

export default {
  name: "purchase",
  components: {
    myHeader,
  },
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data: [],
      //表格选中
      multipleSelection: [],
      //搜索
      search: this.cloneObj(search),
      //选中国家
      selectCountry: "",
      //对话框
      dialogFormVisible: false,
      title: "添加",
      goodsCostInfoForm:this.cloneObj(goodsCostInfoForm),
      goodsCostInfoFormOptions:{
        type:[
          {
            label:'散客',
            value:'散客'
          },{
            label:'注册客户',
            value:'注册客户'
          },{
            label:'VIP客户',
            value:'VIP客户'
          }
        ],
      },
      goodsCostInfoRules:{
        //名称
        name: [this.$RegExp.required("名称不能为空")],
        //首重
        firstWeight: [this.$RegExp.required("首重不能为空")],
        //续重
        nextWeight: [this.$RegExp.required("续重不能为空")],
        //超过多少免首重
        thresholdValue: [this.$RegExp.required("免首重不能为空")],
        //总重不足多少按此计算
        weightThresholdValue: [this.$RegExp.required("总重不能为空")],
        //保险费率(%)
        premiumRate: [this.$RegExp.required("保险费率不能为空")],
        //是否按实际重量计费
        billingByRealWeight: [this.$RegExp.required("实际重量计费不能为空")],
        //所属门店
        storeName: [this.$RegExp.required("所属门店不能为空")],
      },

    };
  },
  computed: {
    ...mapGetters(["stores","roles"]),
  },
  mounted() {
    this.getPostage();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPostage()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPostage()
    },
    //重置表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.goodsCostInfoForm) this.$refs.goodsCostInfoForm.resetFields();
      });
    },
    handleBeforeUpdate(){
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(this.multipleSelection[0])
    },
    handleAddUpdate(row) {
      //修改处理
      if (row) {
        this.title = "修改";
        getPostageInfo(row.id).then(resp=>{
          let row = resp.data
          //将数据复制给form
          this.handleModform(row, this.goodsCostInfoForm);
          console.log(row,'row')
          this.goodsCostInfoForm.customerNums = row.customerNums.join(',')
          this.goodsCostInfoForm.id = row.id;
          this.dialogFormVisible = true;
        })
      } else {
        this.goodsCostInfoForm = this.cloneObj(goodsCostInfoForm);
        this.title = "添加";
        this.dialogFormVisible = true;
      }
    },
    getPostage() {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        info: this.search.info,
        enabled:this.search.enabled,
        exemptFirstWeight:this.search.exemptFirstWeight,
        exemptServiceFee:this.search.exemptServiceFee,
        idCardNeeded:this.search.idCardNeeded,
      };
      getPostage(query).then((resp) => {
        this.data =  resp.data.records
        this.total = resp.data.total;
      });
    },
    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //选择仓库名称
    handleStoreChange(val){},
    //选择客户类型
    handleCustomerType(val){},
    submit() {
      this.$refs["goodsCostInfoForm"].validate((valid) => {
        if (valid) {
          let submit = Object.assign({},
            this.goodsCostInfoForm
          );
          let request;
          submit.customerNums = submit.customerNums.split(',')
          if (this.title == "添加") {
            request = addPostage(submit);
          } else {
            request = modPostage(submit);
          }
          request.then((resp) => {
            this.$message.success(resp.message || "成功");
            this.dialogFormVisible = false;
            this.getPostage();
          });
        }
      });
    },
    //查看零售预购单信息
    view() {
      this.handleBeforeUpdate();
      this.title = '查看'
    },
    //删除零售预购单信息
    delPostage() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.confirm().then(() => {
        delPostage(this.multipleSelection.map((item) => item.id)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");
            this.getPostage();
          }
        );
      });
    },
    //禁用/启用
    enabled(enabled){
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      let ids = this.multipleSelection.map((item) => item.id);
      let tip;
      if (enabled) {
        tip = "此操作将启用包邮商品信息, 是否继续?";
      } else {
        tip = "此操作将禁用包邮商品信息, 是否继续?";
      }
      this.confirm(tip).then(() => {
        disableOrEnablePostage(ids,{enabled}).then((resp) => {
          this.$message.success(resp.message || "成功");
          this.getPostage();
        });
      });
    },
  },
  filters:{
    storesName(val,stores){
      let arr = []
      val.forEach(item=>{
        stores.forEach(child=>{
          if (parseInt(item)===child.id){
            arr.push(child.name)
          }
        })
      })
      return arr.join(',')
    }
  }
};
</script>

<style scoped lang='scss'>
.tdItem {
  line-height: 25px;
}
.self-textarea{
  /deep/ .el-form-item__content{
    margin-left:0px !important;
  }
}
</style>

